<template>
	<div v-if="status" style="z-index:9998;overflow:hidden;">
		<!-- 蒙版 -->
		<div
			v-if="mask"
			@click.stop="hide1"
			class="position-fixed top-0 left-0 right-0 bottom-0 z-index-1"
			:style="getMaskColor"
		></div>
		<!-- 弹窗框内容 -->
		<div
			ref="popup"
			class="position-fixed  free-animated z-index-2"
			:class="getBodyClass"
			:style="getBodyStyle"
			@click.stop=""
		>
			<slot></slot>
		</div>
	</div>
</template>

<script>
// #ifdef APP-PLUS-NVUE
const animation = weex.requireModule('animation');
// #endif
export default {
	props: {
		// 是否开启蒙版颜色
		maskColor: {
			type: Boolean,
			default: false
		},
		// 是否开启蒙版
		mask: {
			type: Boolean,
			default: true
		},
		// 是否居中
		center: {
			type: Boolean,
			default: false
		},
		// 是否处于底部
		bottom: {
			type: Boolean,
			default: false
		},
		// 弹出层内容高度
		bodyWidth: {
			type: Number,
			default: 0
		},
		// 弹出层内容宽度
		bodyHeight: {
			type: Number,
			default: 0
		},
		bodyBgColor: {
			type: String,
			default: 'bg-white'
		},
		transformOrigin: {
			type: String,
			default: 'left top'
		},
		//tabbar高度
		tabbarHeight: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			status: false,
			x: -1,
			y: -1,
			maxX: 0,
			maxY: 0
		};
	},
	mounted() {
		try {
			const res = uni.getSystemInfoSync();
			this.maxX = res.windowWidth - uni.upx2px(this.bodyWidth);
			this.maxY = res.windowHeight - uni.upx2px(this.bodyHeight) - uni.upx2px(this.tabbarHeight);

			console.log(res.windowWidth);
			console.log(res.windowHeight);
		} catch (e) {}
	},
	computed: {
		getMaskColor() {
			let i = this.maskColor ? 0.5 : 0;
			return `background-color: rgba(0,0,0,${i});`;
		},
		getBodyClass() {
			if (this.center) {
				return 'left-0 right-0 bottom-0 top-0 flex align-center justify-center';
			}
			let bottom = this.bottom ? 'left-0 right-0 bottom-0' : 'rounded border';
			return `${this.bodyBgColor} ${bottom}`;
		},
		getBodyStyle() {
			let left = this.x > -1 ? `left:${this.x}px;` : '';
			let top = this.y > -1 ? `top:${this.y}px;` : '';
			return left + top;
		}
	},
	methods: {
		show(x = -1, y = -1) {
			if (this.status) {
				return;
			}
			this.x = x > this.maxX ? this.maxX : x;
			this.y = y > this.maxY ? this.maxY : y;
			this.status = true;
			// #ifdef APP-PLUS-NVUE
			this.$nextTick(() => {
				animation.transition(
					this.$refs.popup,
					{
						styles: {
							transform: 'scale(1,1)',
							transformOrigin: this.transformOrigin,
							opacity: 1
						},
						duration: 100, //ms
						timingFunction: 'ease',
						delay: 0 //ms
					},
					function() {
						console.log('动画执行结束');
					}
				);
			});
			// #endif
		},
		hide1() {
			console.log('我是蒙版上的');
			this.hide();
		},
		hide() {
			console.log('hide');
			this.$emit('hide');
			// #ifdef APP-PLUS-NVUE
			animation.transition(
				this.$refs.popup,
				{
					styles: {
						transform: 'scale(0,0)',
						transformOrigin: this.transformOrigin,
						opacity: 0
					},
					duration: 100, //ms
					timingFunction: 'ease',
					delay: 0 //ms
				},
				() => {
					this.status = false;
					console.log('动画执行结束');
				}
			);
			// #endif
			// #ifndef APP-PLUS-NVUE
			this.status = false;
			// #endif
		}
	}
};
</script>

<style scoped>
.free-animated {
	/* #ifdef APP-PLUS-NVUE */
	transform: scale(0, 0);
	opacity: 0;
	/* #endif */
}
.z-index-1 {
	/* #ifndef APP-NVUE */
	z-index: 9998;
	/* #endif */
}
.z-index-2 {
	/* #ifndef APP-NVUE */
	z-index: 9999;
	/* #endif */
}
</style>
